<template>
    <div class='box'>
        {{name}}
        <input v-model='name'/>
        <!-- 把name这个变量对应值 通过 qqq这个属性 传递给了 my-h1组件 -->
        <my-h1 :qqq='name' @myfn='fn'></my-h1>
        <my-h1 :qqq='name'></my-h1>
        <my-h1 :qqq='name'></my-h1>
        <box></box>
    </div>
</template>
<script>
// @ is an alias to /src
/* 
  子组件想用 父组件的数据：  父传子  自定义属性+props
  父组件想用 子组件的数据或者子组件想要修改父组件的数据：  自定义事件+$emit
*/
import h1 from './mycomponents/h1'
export default {
    // name: 'XXX',// name是当前组件的名字 可以不写 但是写了 必须保证 不能是html标签
    data() {
        return {
          name:"珠峰"
        }
    },
    components: {
        'my-h1':h1
    },
    methods: {
      fn(val){
        this.name = val;
        console.log(arguments,this)
      }
    },
}
</script>
<style lang="less">
  .box{
    color:red
  }
</style>